<template>
  <UiFormItem :class="{ hidden: info.extension.hidden.value || conditionProperty.hidden }" :info="info">
    <el-select
      :ref="info._id"
      v-model="formDataModel"
      v-ui-ref="vSetRef"
      class="w-full"
      :disabled="info.extension.disabled.value || conditionProperty.disabled"
      :multiple="info.extension.multiple.value"
      placeholder="Select"
      size="mini"
    >
      <el-option v-for="item in optionList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId" />
    </el-select>
  </UiFormItem>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiWarehouseSelect',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return {
        options: [],
      }
    },
    computed: {
      optionList() {
        return this.$store.getters['user/warehouseList'] || []
      },
      // first
      defaultWarehouse() {
        return this.$store.getters['user/wareHoseId']
      },
      isMultiple() {
        return this.info.extension.multiple.value
      },
    },
    watch: {
      isMultiple(val) {
        if (val && this.formDataModel) {
          this.formDataModel = [this.formDataModel]
        }
        if (!val && Array.isArray(this.formDataModel)) {
          this.formDataModel = this.formDataModel[0]
        }
      },
    },
    created() {
      if (this.defaultWarehouse) {
        if (this.isMultiple) {
          this.formDataModel = [this.defaultWarehouse]
        } else {
          this.formDataModel = this.defaultWarehouse
        }
      }
    },
    mounted() {},
    methods: {},
  })
</script>
<style lang="scss" scoped></style>
